<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>table管理</el-breadcrumb-item>
      <el-breadcrumb-item>压力测试</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="stressVo" class="demo-form-inline">
          <el-form-item label="压力测试时间"  label-width="100px">
            <div class="block">
              <el-date-picker
                v-model="opDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-form-item><br>
          <el-form-item label="压力测试名称"  label-width="100px">
            <el-input v-model="preName" placeholder="请输入角色名" clearable></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 10px">
            <el-button type="primary" icon="el-icon-search" @click="findstressVOListM">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="resertstressVO">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="success" icon="el-icon-plus" @click="show">发起压力测试</el-button></div></el-col>
        </el-row>
      </div>
      <el-table

       ref="listTable"
       :data="tableData"
       @row-click="handleRowClick"
       @select="handleSelection"
       @select-all="handleSelectionAll"
       :header-cell-style="tableHeaderStyle"
       fit
       border
       stripe
       highlight-current-row
       :summary-method="getSummaries"
       show-summary
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column
          v-for="(item,index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="mini" icon="el-icon-search" @click="queryAnalyse(scope.row.testId)">查看结果</el-button>
          </template>

        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current--change="handleCurrentChange"
          layout="total,sizes,prev,next,jumper"
          :current-page.sync="pageInfo.currentPage"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          :page-sizes="[10,20,50]"
        ></el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import {stressTestResult} from '../../api/stress'
import {Time} from '../../utils/time'
import { loginDtos } from '../../api/login'

export default {
  name: 'Stress',
  data(){
    const labelsObj = {
      search:"查询",
      reset:"重置",
      preDate:"压力测试时间",
      preResult:"查看结果",
      goPress:"发起压力测试",
      testId:"压力测试编号",
      name:"压力测试名称",
      testTime:"压力测试时间"
    }
    return{
      labkes:labelsObj,
      pageInfo:{
        currentPage:1,
        total:0,
        pageSize:10
      },
      preName : "",
      testId : "",
      stressVo:{},
      mutipleSelection:[],
      tableData:[],
      tableColumn:[
        {
          prop:"testId",
          label:labelsObj.testId
        },
        {
          prop:"name",
          label:labelsObj.name
        },
        {
          prop:"testTime",
          label:labelsObj.testTime,
          formatter:(value,column)=>{
            return this.dateYMDFormat(value,column);
          }
        }, {
          prop:"name",
          label:labelsObj.name
        },

      ],
      opDate:'',


    }
  },
  methods:{
    handleSelectionChange(val) {
      console.log("handleSelectionChange")
      this.multipleSelection = val;
    },
    show(){
      this.$router.push({
        name:"StressResult",
      })
    },
    show1(testid){

    },
    resertstressVO(){
      this.stressVO = {}
    },
    findstressVOListM(){
      this.searchByStressTest();
    },
    searchByStressTest(){
      this.tableData = [];
      let sDate='';
      let eDate='';
      if(this.opDate != null){
        let ssDate = new Date(this.opDate[0])
        sDate=ssDate.getFullYear() + '-' + (ssDate.getMonth() + 1) + '-' + ssDate.getDate();
        let eeDate = new Date(this.opDate[1])
        eDate=eeDate.getFullYear() + '-' + (eeDate.getMonth() + 1) + '-' + eeDate.getDate();
      }
      let resultQueryVO = {
        edate : this.opDate ? eDate : '',
        sdate : this.opDate ? sDate : '',
        name  : this.preName,
        current:this.pageInfo.currentPage,
        size:this.pageInfo.pageSize
      }
      let data = {
        resultQueryVO
      }
      stressTestResult(resultQueryVO).then(res =>{
        if(res.data.code === 200){
          this.tableData =res.data.data
        }
      })

    },
    dateYMDFormat(row,column){
      let date = row[column.property];
      if(date === undefined || date === null){
        return "";
      }
      return Time.getLastDate(date);
    },
    doHandleSelection(row){
      if(this.mutipleSelection.length > 0 &&this.mutipleSelection[0] === row){
        this.$refs.listTable.clearSelection();
      }else {
        this.$refs.listTable.clearSelection();
        this.$refs.listTable.toggleRowSelection(row,true);
        this.multipleSelection = [row]
        console.log(this.multipleSelection)
      }
    },
    handleRowClick(row,column,event){
      this.doHandleSelection(row);
    },
    handleSelection(selection,row){
      this.doHandleSelection(row);
    },
    handleSelectionAll(selection){
      this.$refs.listTable.clearSelection();
      this.mutipleSelection = [];
    },
    // tableRowStyle(){
    //   return { height :"45px"};
    // },
    tableHeaderStyle({row,column,rowIndex,columnIndex}){
      return {color :'#29ab91',fontSize : "16px", textAlign: "center"}
    },
    handleSizeChange(val){
      this.pageInfo.pageSize = val;
      this.searchByStressTest();
    },
    handleCurrentChange(val){
      this.pageInfo.currentPage = val;
      this.searchByStressTest();
    },
    queryAnalyse(testId){
      this.$router.push({
        name:"StressResult",
        query:{
          testId:testId,
        }
      })
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    }
  },
  created () {
   this.searchByStressTest();
  }
}
</script>

<style scoped>

.el-col {

}
.bg-purple-dark {

}
.bg-purple {

}
.bg-purple-light {

}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
